<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font: 12px "simhei", Arial, Helvetica, sans-serif;
            color: #666;
        }
        /*去掉所有标签自带的外边距*/
       /*
       *{
            margin: 0;
        }
        */
        div{
            width: 198px;
            height: 233px;
            background-color: #E8E8E8;
            /*给div添加居中，里面两个p子元素都继承看居中所以内容居中了
            超链接由于是行内元素是受div内容居中影响而居中的，不是因为继承*/
            text-align: center;
        }
       .title_p{
           margin:0 0 6px 0;   /*去掉自带的上外边距并修改下外边距*/
           font-weight: lighter;
           color: #000;
       }
        .price_p{
            color: #0AA1ED;
            margin: 6px 0 6px 0;
            font-weight: bold;
        }
        a{
            width: 100px;
            height:24px ;
            /*display: block;*/
            /*行内元素和行内块元素如果上级元素设置了text-align:center 则元素会居中*/
            display: inline-block;
            /*块级元素不受上级text-align:center的影响，元素不会居中
            需要通过添加以下 margin 0 auto 写法让元素再一行之内居中*/
            /*块级元素再一行之内居中*/
            margin: 0 auto;

            color: white;
            background-color: #0AA1ED;
            text-decoration: none;
            line-height: 24px;
            border-radius: 3px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div>
    <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png" alt="">
    <p class="title_p">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
    <p class="price_p">￥4600.00</p>
    <a href="http://www.tmooc.cn">查看详情</a>
</div>
</body>
</html>